<template>
  <el-dialog :visible.sync="editDialogVisible" @close="handleClose" width="80%" class="dialog">
    <template slot="title">
      <span style="color: rgba(52, 69, 99, 1); font-size: 18px;font-weight: bold; margin-left: 5px;margin-top: 34px;">
        编辑入库单
        <br/><br/>
        <hr/>
      </span>
    </template>

    <div class="dialog-content">
      <el-form :model="editForm">
        <el-form-item label="入库单编号">
          <el-input v-model="editForm.stockSn" disabled="disabled" style="width: 40%;"></el-input>
        </el-form-item>
        <el-form-item label="入库商品"></el-form-item>
        <div class="productTable">
          <el-tag>
            {{ editForm.commodityName }}
          </el-tag>
          <el-table :data="[editForm]" border style="width: 100%;">
            <el-table-column v-for="(item,index) in tableColumns" :key="index" :label="item.key" :prop="item.value"
              min-width="100">
              {{ item.value }}
            </el-table-column>
            <el-table-column label="单位" min-width="100">
              <template slot-scope="scope">
                <el-input v-model="scope.row.unit"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="单价" min-width="100">
              <template slot-scope="scope">
                <el-input v-model="scope.row.price">
                  <template #prefix>￥</template>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="数量" min-width="100">
              <template slot-scope="scope">
                <el-input v-model="scope.row.stockNumber"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="金额" min-width="100">
              <template slot-scope="scope">
                <el-input v-model="scope.row.money">
                  <template #prefix>￥</template>
                </el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button type="info" class="footer-button" @click="handleClose">取消</el-button>
      <el-button class="footer-button confirm-button" @click="submitForm">确定</el-button>
    </div>

  </el-dialog>
</template>

<script>
export default {
  props:{
    visible:{
      type: Boolean,
      default: false
    },
    rowData:{
      type: Object,
      default: () =>({})
    }
  },
  data(){
    return{
      editDialogVisible: false,
      editForm:{
        stockSn: '',
        commodityName: '',
        unit: '',
        price: 0,
        stockNumber: 0,
        money: 0,
        spData: []
      },
    }
  },
  watch:{
    visible(val){
      this.editDialogVisible = val
    },
    rowData:{
      handler(Value){
        this.editForm = {...Value}
      },
      deep: true,
      immediate: true
    }
  },
  methods:{
    handleClose(){
      this.editDialogVisible = false
      this.$emit('update:visible', false)
    },
     submitForm(){
      this.$emit('submit', this.editForm)
      this.handleClose()
    }
  },
  computed:{
    tableColumns(){
      return JSON.parse(this.editForm.spData)
    }
  }
}
</script>

<style scoped>
.dialog {
  max-height: 100vh !important;
  overflow-y: hidden;
  left: 15%;
}

.dialog-content {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  height: 480px;
}


.el-icon-search {
  margin-top: 14px;
  width: 15px;
  margin-left: 6px;
}

.el-pagination {
  float: right;
}

.dialog-footer {
  position: absolute;
  bottom: 10px;
  right: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  background-color: #fff;
  padding: 10px 20px;
  border-top: 1px solid #ebeef5;
}

.footer-button {
  font-size: 14px;
  height: 38px;
  width: 150px;
  margin-right: 8px;
}

.confirm-button {
  background-color: rgba(90, 52, 179, 1);
  color: white;
}

.productTable {
  margin-top: 10px;
}

.el-table .el-table--fit .el-table--border .el-table--enable-row-hover {
  background-color: #ebeef5;

}
</style>
